<!--这个组件用的时候再写，拉取threePicker组件里面的一部分东西，结合slot-->
<template>
    <div class="slide-bottom">
        <transition name="slideBottom">
            <div
                class="slide-bottom-transition"
                v-if="showSlide"
            >
                <!--无名插槽-->
                <slot></slot>
            </div>
        </transition>
        <v-bord v-if="slideBottom.bordShow && showSlide">
            <div
                @click="clickBord(true)"
                slot="cantClick"
                class="com_black"
            ></div>
        </v-bord>
    </div>
</template>

<script>
export default {
    name: "SlideBottom",
    props: {
        slideBottomProp: Object,
    },
    data () {
        return {
            showSlide: false,/*@showSlide 下滑的框的出现*/
            slideBottom: {
                bordShow: true,
                canClickBord: true,
            }
        }
    },
    mounted () {
        this.slideBottom = Object.assign({}, this.slideBottom, this.slideBottomProp);
        this.showSlide = true;
    },
    methods: {
        clickBord (boolean = false) {
            if (boolean && !this.slideBottom.canClickBord) {
                return
            }
            this.$emit('closeSlideBottom');
            this.showSlide = false
        },
        showSlideBottom () {
            this.showSlide = true;
        }
    },
    components: {
        'v-bord': () => import('../../../components/commonComponents/alert/Bord'),
    },
    watch: {
        slideBottomProp (val) {
            this.slideBottom = Object.assign({}, this.slideBottom, val);
        }
    },
}
</script>

<style scoped>
.slide-bottom-transition {
    width: 3.75rem;
    height: 5.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1062 !important;
    background-color: #fff;
    position: fixed;
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
    overflow: auto;
}
.slideBottom-leave-active {
    /*bottom: -5.5rem;*/
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    transition: all 0.3s linear;
}
.slideBottom-enter-active {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition: all 0.3s linear;
}
.slideBottom-enter,
.slideBottom-leave-to {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
</style>